<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-06-12 17:51:07
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-06-12 17:51:41
 * @FilePath: \liuyanggui\src\cuselement-ui\cus-previewImg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
import "viewerjs/dist/viewer.css";
import { api as viewerApi } from "v-viewer";

defineOptions({
  name: "ImageGallery"
});

const props = defineProps({
  // 传入图片列表，支持两种格式
  // 1. 图片对象列表 [{src: ''}]，会默认从 src取，可以调整取参的key
  // 2. 图片URL列表['url1', 'url2']
  imageList: {
    type: Array,
    default: () => []
  },
  //  图片对象列表，会默认从 src取，可以调整取参的key
  imageUrlKey: {
    type: String,
    default: () => "src"
  }
});

const $viewer = ref(null);

// 预览图片，默认从第一个开始预览，调方法的时候，可以修改
const previewImage = (initialIndex = 0) => {
  const imageList = props.imageList;

  if (!imageList || imageList.length === 0) {
    console.error("请传入正确的图片数组");
    return;
  }
  const previewConfig = {
    options: {
      toolbar: true,
      initialViewIndex: initialIndex
    },
    images: imageList
  };
  if (imageList[0][props.imageUrlKey]) {
    previewConfig.options.url = props.imageUrlKey;
  }

  // If you use the `app.use` full installation, you can use `this.$viewerApi` directly
  $viewer.value = viewerApi(previewConfig);
};

defineExpose({
  previewImage
});
</script>
<template>
  <div />
</template>
<style lang="scss" scoped></style>
